<template>
  <div class="main_content">
    <NavHeader class="main_content-header" />
    <el-carousel id="content" ref="carouselRef" @change="handleChange" class="main-content-carousel"
      direction="vertical" :autoplay="false" v-if="ListData && ListData.length" indicator-position="none" :loop="false">
      <el-carousel-item v-for="(item, index) in ListData" :key="index">
        <ArticleContent ref="articleContentRef" :data="item" />
      </el-carousel-item>
    </el-carousel>
    <Footer />
  </div>
</template>

<script lang="ts" setup>
import NavHeader from '@/components/header'
import ArticleContent from '@/components/article-content'
import { getArticleList } from '@/api/article'
import { ref, nextTick } from 'vue'
import Footer from "@/components/footer"
import router from '@/router'
import touch from '@/utils/touch'


const ListData = ref()
const carouselRef = ref()
const articleContentRef = ref()

// 获取列表数据
getArticleList().then((res) => {
  ListData.value = res.data.data
  nextTick(() => {
    const element = <HTMLElement>document.getElementById('content')
    touch(element, onSlideown, onSlideUp)
    handleChange(0)
  })
})

const handleChange = (index: number) => {
  articleContentRef.value[index].onGetLikeNum()
}
// 上滑
const onSlideUp = () => {
  carouselRef.value.prev()
}

// 下滑
const onSlideown = () => {
  carouselRef.value.next()
}

// 发布文章
const addArticle = () => {
  router.push('/addArticle')
}
</script>

<style lang="less" scoped>
.main_content {

  // &-header {
  //   position: absolute;
  //   top: 0;
  // }
  &-addarticle {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;

    >span {
      border: 1px dashed #ffffff;
    }
  }
}

:deep(.el-carousel__container) {
  height: 100vh;
}
</style>